'use strict';

import gulp from 'gulp';
import babel from 'gulp-babel';
import autoprefixer from 'gulp-autoprefixer';
import notify from 'gulp-notify';
import browserSync from 'browser-sync';
import rename from 'gulp-rename';
import includeTag from 'gulp-include-tag'; //include 方法
import sass from 'gulp-sass';
import es from 'event-stream';
//error 后，的操作，用于less报错后继续执行
import plumber from 'gulp-plumber';

// browserify 编译 ES6
import browserify from 'browserify';
// 创建map
import sourcemaps from 'gulp-sourcemaps';

// gulp 中使用的是 vinyl-buffer  browserify 中使用的是 普通的 buffer 需要转换下
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import babelify from 'babelify';
import { cssPath, sassPath, jsPath, htmlPath, entryFiles } from './source.js';

function dev(){

    var reload = browserSync.reload;

    gulp.task('css', () => {
      gulp.src(cssPath)
        .pipe(plumber())
        .pipe(autoprefixer({browsers: ['last 2 versions','Firefox >= 20']}) )
        .pipe(rename({
                dirname: 'assets/css',
                extname: '.dev.css'
            }))
        .pipe(gulp.dest('build/'))
        .pipe(browserSync.reload({stream:true}))
    })

    gulp.task('sass', function () {
        gulp.src(sassPath)
            .pipe(plumber())
            .pipe(sass())
            .pipe(autoprefixer({browsers: ['last 2 versions','Firefox >= 20']}) )
            .pipe(rename({
                dirname: 'assets/css',
                extname: '.dev.css'
            }))
            .pipe(gulp.dest('build/'))
            .pipe(browserSync.reload({stream:true}))
    });

    //任务 - include 方法 
    /**
    *  eg: <include src="public/header.html" data="test"></include>
    *  在header.html可以通过 {{data}} 获取到test
    */
    gulp.task('include', () => {
      gulp.src(htmlPath)
        .pipe(plumber())
        .pipe(includeTag())
        .pipe(gulp.dest('build'))
        .pipe(browserSync.reload({stream:true}))
    });

    // The static server
    gulp.task('server', () => {
        browserSync.init({
            port:8000,
            server: {
                baseDir: "./build"
            },
            open: false
            // proxy: '127.0.0.1:80'
        });
        gulp.watch(cssPath, ['css']);
        gulp.watch(sassPath, ['sass']);
        gulp.watch(jsPath, ['es6']);
        gulp.watch(htmlPath, ['include']); //.on('change', reload);
    });

    //set browserify task - JS异步刷新 这里用到了map缓存
    gulp.task('es6',()=> {

		const tasks = entryFiles.map(function(entry){
			return browserify({
				entries: entry,
				debug: true
			})
			.transform("babelify", {presets: ["es2015"]})
			.bundle()// 多个文件打包成一个文件
			.on('error', function(err){
			  console.log(err.message);
			  this.emit('end');
			})
			.pipe(source(entry))// browserify的输出不能直接用做gulp输入，所以需要source进行处理 
			.pipe(rename({
                dirname:'assets/js',
				extname: '.dev.js'
			}))
			.pipe(buffer()) //需要转换成buffer，才能继续其他操作
			.pipe(sourcemaps.init({loadMaps: true})) // loads map
			.pipe(sourcemaps.write('./')) // writes .map file
			.pipe(gulp.dest('build/'))
		})
	   
       // 合并流，重新自动刷新
        es.merge.apply(null, tasks).pipe(browserSync.reload({stream:true}))
    })
	

    gulp.task('default', ['css','sass','include','es6','server']);
}

export default dev;